<template>
  <el-form ref="activityRefForm" :model="activityQuery" label-width="110px" :rules="activityRules">
    <el-form-item label="负责人" prop="ownerId">
      <el-select v-model="activityQuery.owner_id" placeholder="请选择" class="width">
        <el-option
            v-for="item in ownerOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
      </el-select>
    </el-form-item>

    <el-form-item label="活动名称" prop="name">
      <el-input v-model="activityQuery.name" />
    </el-form-item>

    <el-form-item label="开始时间" prop="start_time">
      <el-date-picker
          v-model="activityQuery.start_time"
          type="datetime"
          placeholder="请选择创建时间"
          value-format="YYYY-MM-DD HH:mm:ss" style="width:100%;"/>
    </el-form-item>

    <el-form-item label="结束时间"  prop="end_time">
      <el-date-picker
          v-model="activityQuery.end_time"
          type="datetime"
          placeholder="请选择创建时间"
          value-format="YYYY-MM-DD HH:mm:ss" style="width:100%;"/>
    </el-form-item>

    <el-form-item label="活动预算" prop="cost">
      <el-input v-model="activityQuery.cost" />
    </el-form-item>

    <el-form-item label="活动描述" prop="description">
      <el-input
          v-model="activityQuery.description"
          :rows="6"
          type="textarea"
          placeholder="请输入活动描述"/>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="activitySubmit">提 交</el-button>
      <el-button @click="goBack(router)">返 回</el-button>
    </el-form-item>

  </el-form>
</template>
<script setup>
import {goBack, messageTip} from "../util/util.js";
import router from "../router/router.js";
import {onMounted, reactive, ref} from "vue";
import {doGet, doPost, doPut} from "../http/httpRequest.js";
import {useRoute} from "vue-router";

let route = useRoute();

let activityQuery = reactive({});
let activityRefForm = ref();
//负责人下拉菜单
let ownerOptions = ref([{}]);
//市场活动表单验证规则
let activityRules = {
   owner_id : [
     { required: true, message: '请选择负责人', trigger: 'blur' }
   ],
       name : [
     { required: true, message: '请输入活动名称', trigger: 'blur' }
   ],
       start_time : [
     { required: true, message: '请选择开始时间', trigger: 'blur' }
   ],
       end_time : [
     { required: true, message: '请选择结束时间', trigger: 'blur' }
   ],
       cost : [
     { required: true, message: '请输入活动预算', trigger: 'blur' },
     //正则表达式，从网上找，或者AI工具找，找到后需要测试一下，因为有可能找到的正则有问题
     { pattern : /^[0-9]+(\.[0-9]{2})?$/, message: '活动预算必须是整数或者两位小数', trigger: 'blur'}
   ],
       description : [
     { required: true, message: '请输入活动描述', trigger: 'blur' },
     { min: 5, max: 255, message: '活动描述长度为5-255个字符', trigger: 'blur' }
   ]
 }

 onMounted(()=>{
   loadOwner();
   //加载要编辑的数据（由于录入和编辑共用一个页面，所以要判断是 编辑还是录入）
   loadActivity();
 })
//获取负责人
const loadOwner = () => {
  doGet("/api/owner", {}).then(resp => {
    console.log(resp)
    if (resp.data.code === 200)  {
      ownerOptions.value = resp.data.data;
    }
  })
}
//编辑需要加载活动信息
const loadActivity = () => {
  let id = route.params.id;
  if(id){ //id存在加载活动信息
    doGet("/api/activity/"+id,{}).then((resp)=>{
      console.log(resp);
      if(resp.data.code === 200){
        activityQuery = resp.data.data;
      }
    })
  }
}
//提交
const activitySubmit = () => {
  activityRefForm.value.validate((isValid)=>{
    if (isValid) {
      let formData = new FormData();
      for(let field in activityQuery){
        if(activityQuery[field]){//如果是录入活动的话，是没有id值的
          formData.append(field,activityQuery[field]);
        }
      }
      if (activityQuery.id > 0) { /*编辑*/
        doPut("/api/activity", formData).then(resp => {
          if (resp.data.code === 200) {
            messageTip("编辑成功", "success");
            //跳转到市场活动列表页
            router.push("/dashboard/activity");
          } else {
            messageTip("编辑失败", "error");
          }
        })
      } else  {
        doPost("/api/activity", formData).then(resp => {/*新增*/
          if (resp.data.code === 200) {
            messageTip("提交成功", "success");
            //跳转到市场活动列表页
            router.push("/dashboard/activity");
          } else {
            messageTip("提交失败", "error");
          }
        })
      }
    }
  })
}
</script>

<style scoped>
.width {
  width: 100%;
}
</style>